<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    trendData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      sidebarElm: null
    }
  },
  watch: {
    lineData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }

    // 监听侧边栏的变化
    this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }

    this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)

    this.chart.dispose()
    this.chart = null
  },
  methods: {
    sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.__resizeHandler()
      }
    },
    setOptions() {
      this.chart.setOption(
        {
          title: {
            text: '',
            subtext: '折线',
            subtextStyle: {
              fontSize: 20,
              color: '#c3ffff'
            },
            x: 0
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false
          },
          grid: {
            top: '20%',
            left: '5%',
            right: '8%',
            bottom: '4%',
            containLabel: true
          },
          toolbox: {
            show: false,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.trendData.name,
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#94e5ff', // 更改坐标轴文字颜色
                  fontSize: 12 // 更改坐标轴文字大小
                }
              },
              axisTick: { // 去刻度
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#191f4a'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#191f4a',
                  width: 0.5
                }
              }
            }

          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#191f4a'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#94e5ff', // 更改坐标轴文字颜色
                  fontSize: 12 // 更改坐标轴文字大小
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#191f4a',
                  width: 0.5
                }
              }
            }
          ],
          series: [
            {
              name: this.trendData.title,
              type: 'line',
              data: this.trendData.data,
              // 拐点样式
              symbol: 'emptyCircle',
              // 拐点大小
              symbolSize: 5,
              // 是否默认显示拐点
              showSymbol: true,
              color: ['#c3ffff'],
              smooth: true,
              itemStyle: {
                color: '#018485',
                borderColor: 'rgba(221,220,107,.1)',
                borderWidth: 10
                /* normal:
                  {
                    lineStyle: {
                      width: 3,
                      type: 'solid', // dotted虚线，solid实线
                      color: '#c3ffff'
                    }
                  }*/
              },
              areaStyle: { // 折现下是否填充
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(255,255,255,0.8)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(0,0,0,0.1)' // 100% 处的颜色
                  }],
                  global: false
                }
              }
            }
          ]
        }
      )
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.trendData)
    }
  }
}
</script>
